<template>
  <div class="home">
    <el-container>
      <el-header>菜谱大全</el-header>
      <el-container style="height:600px;border:1px solid #eee">
        <el-aside width="400px" style="background-color:rgb(228,241,246)">
          <el-menu v-for="s in result" :key="s.classid" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
            <el-submenu :index="s.classid">
              <template slot="title">
                <span>{{s.name}}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item style="padding-left:100px" v-for="f in s.list" :key="f.classid" index="f.classid" @click="foodsPage(f.classid)">{{f.name}}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main>
            <el-table :data="list" style="width:100%;min-height:300px">
              <el-table-column type="index" label="序号"></el-table-column>
              <el-table-column prop="name" label="名字"></el-table-column>
              <el-table-column prop="pic" label="图片">
                <template slot-scope="scope">
                  <img :src="scope.row.pic" alt="">
                </template>
              </el-table-column>
              <el-table-column prop="cookingtime" label="烹饪时间"></el-table-column>
              <el-table-column prop="tag" label="标签"></el-table-column>
              <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                  <el-button @click="handleClick(scope.row.id)" type="text" size="small">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import {
  getAllTypes,
  getFoodsByPage,
  getFoodDetail,
  getFoodByKeyWord
} from "../services/foods";
export default {
  name: "Home",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      loading: true,
      result: [],
      classid: 2,
      num: 10,
      start: 0,
      list: []
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    foodsPage(val) {
      this.classid = val;
      console.log(val)
      getFoodsByPage(this.classid, this.start, this.num).then((res) => {
        this.list = res.data.result.list;
        console.log(res);
      });
    },
    handleClick(id) {
      console.log(id);
      this.$router.push({
        name:'FoodMsg',
        query: {
          id,
        }
      });
    }
  },
  created() {
    getAllTypes().then((res) => {
      console.log(res);
      this.result = res.data.result;
    });
    getFoodsByPage(this.classid, this.start, this.num).then((res) => {
      this.list = res.data.result.list;
      console.log(res);
    });
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-header {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
}
.el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
}
.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
}
</style>
